<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Steps 步骤条</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons-vue.js"></script>
<style type="text/css">
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
.steps-action {
  margin-top: 24px;
}
</style>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">简单的步骤条。</p>
	<a-steps :current="1" :items="items1" @change="onChange"></a-steps>
	
	
	<a-divider class="a-divi" orientation="left">迷你版</a-divider><!-- =============================================================== -->
	<p class="desc">迷你版的步骤条，通过设置 <Steps size="small"> 启用.</p>
	<a-steps :current="1" size="small" :items="items2"></a-steps>
	
	
	<a-divider class="a-divi" orientation="left">带图标的步骤条</a-divider><!-- =============================================================== -->
	<p class="desc">通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。</p>
	<a-steps :items="items3"></a-steps>
	
	
	<a-divider class="a-divi" orientation="left">步骤切换</a-divider><!-- =============================================================== -->
	<p class="desc">通常配合内容及按钮使用，表示一个流程的处理进度。</p>
	<div>
		<a-steps :current="current4" :items="items4"></a-steps>
		<div class="steps-content">
			{{ steps4[current4].content }}
		</div>
		<div class="steps-action">
			<a-button v-if="current4 < steps4.length - 1" type="primary" @click="next">Next</a-button>
			<a-button v-if="current4 == steps4.length - 1" type="primary" @click="message.success('Processing complete!')">Done</a-button>
			<a-button v-if="current4 > 0" style="margin-left: 8px" @click="prev">Previous</a-button>
		</div>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">竖直方向的步骤条</a-divider><!-- =============================================================== -->
	<p class="desc">简单的竖直方向的步骤条。</p>
	<a-steps direction="vertical" :current="1" :items="items1"></a-steps>
	
	
	<a-divider class="a-divi" orientation="left">竖直方向的小型步骤条</a-divider><!-- =============================================================== -->
	<p class="desc">简单的竖直方向的小型步骤条。</p>
	<a-steps direction="vertical" :current="1" :items="items1" size="small"></a-steps>
	
	
	<a-divider class="a-divi" orientation="left">步骤运行错误</a-divider><!-- =============================================================== -->
	<p class="desc">使用 Steps 的 status 属性来指定当前步骤的状态。</p>
	<a-steps :current="1" status="error" :items="items1"></a-steps>
	
	
	<a-divider class="a-divi" orientation="left">点状步骤条</a-divider><!-- =============================================================== -->
	<p class="desc">包含步骤点的进度条。</p>
	<div>
		<a-steps progress-dot :current="1" :items="items1"></a-steps>
		<a-divider></a-divider>
		<a-steps progress-dot :current="1" direction="vertical" :items="items1"></a-steps>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">自定义点状步骤条</a-divider><!-- =============================================================== -->
	<p class="desc">为点状步骤条增加自定义展示。</p>
	<div>
		<a-steps :current="1" :items="items9">
			<template #progressDot="{ index, status, prefixCls }">
				<a-popover>
					<template #content>
						<span>step {{ index }} status: {{ status }} 很明显没生效</span>
					</template>
					<span :class="`${prefixCls}-icon-dot`"></span>
				</a-popover>
			</template>
		</a-steps>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">可点击</a-divider><!-- =============================================================== -->
	<p class="desc">设置 v-model 后，Steps 变为可点击状态。</p>
	<div>
		<a-steps v-model:current="current10" :items="items10" @change="onChange"></a-steps>
		<a-divider></a-divider>
		<a-steps v-model:current="current10" :items="items10" @change="onChange" direction="vertical"></a-steps>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">导航步骤</a-divider><!-- =============================================================== -->
	<p class="desc">导航类型的步骤条。</p>
	<div>
		<a-steps v-model:current="current11" type="navigation" :style="stepStyle" :items="items11" size="small"></a-steps>
		<a-steps v-model:current="current11" type="navigation" :style="stepStyle" :items="items12"></a-steps>
		<a-steps v-model:current="current11" type="navigation" :style="stepStyle" :items="items13" size="small"></a-steps>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">带有进度的步骤</a-divider><!-- =============================================================== -->
	<p class="desc">带有进度的步骤。</p>
	<a-steps v-model:current="current14" :percent="60" :items="items14"></a-steps>
	<a-steps v-model:current="current14" :percent="80" size="small" :items="items15"></a-steps>
	
	
	<a-divider class="a-divi" orientation="left">标签放置位置</a-divider><!-- =============================================================== -->
	<p class="desc">修改标签放置位置为 vertical。</p>
	<div>
		<a-steps :current="1" label-placement="vertical" :items="items1"></a-steps>
		<br />
		<a-steps :current="1" label-placement="vertical" :items="items1" :percent="60"></a-steps>
		<br />
		<a-steps :current="1" label-placement="vertical" :items="items1" size="small"></a-steps>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">内联步骤条</a-divider><!-- =============================================================== -->
	<p class="desc">内联类型的步骤条，适用于列表内容场景中展示对象所在流程、当前状态的情况。【有问题】</p>
	<a-list :data-source="data16">
		<template #renderItem="{ item }">
			<a-list-item>
				<a-list-item-meta description="Ant Design, a design language for background applications, is refined by Ant UED Team">
					<template #title>
						<a href="https://www.antdv.com/">{{ item.title }}</a>
					</template>
					<template #avatar>
						<a-avatar src="https://joeschmoe.io/api/v1/random"></a-avatar>
					</template>
				</a-list-item-meta>
				<a-steps style="margin-top: 8px" type="inline" :current="item.current" :status="item.status" :items="items16"></a-steps>
			</a-list-item>
		</template>
	</a-list>
	
	
	
	
	
	
	
	
	
</div>
<div class="h100"></div>

</body>
<script>

let description = 'This is a description.';
const Main = {
data() {
	return {
		items1: [
			{title: 'Finished',description,},
			{title: 'In Progress',description,subTitle: 'Left 00:00:08',},
			{title: 'Waiting',description,},
		],
		
		items2: [
			{title: 'Finished',},
			{title: 'In Progress',},
			{title: 'Waiting',},
		],
		
		items3: [
			{title: '选择',status: 'finish',	icon: Vue.h(ElementPlusIconsVue.Search, {class: "aut-icon"}),},
			{title: '购买',status: 'finish',	icon: Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}),},
			{title: '收货',status: 'process',	icon: Vue.h(ElementPlusIconsVue.Share, {class: "aut-icon"}),},
			{title: '使用',status: 'wait',		icon: Vue.h(ElementPlusIconsVue.Edit, {class: "aut-icon"}),},
		],
		
		current4: 0,
		steps4: [
			{title: 'First',content: 'First-content',},
			{title: 'Second',content: 'Second-content',},
			{title: 'Last',content: 'Last-content',},
		],
		items4: [
			{key: 'First', title: 'First',},
			{key: 'Second', title: 'Second',},
			{key: 'Last', title: 'Last',},
		],
		
		items9: [
			{title: 'Finished',description,},
			{title: 'In Progress',description,},
			{title: 'Waiting',description,},
			{title: 'Waiting',description,},
		],
		
		current10: 1,
		items10: [
			{title: 'Step 1',description,},
			{title: 'Step 2',description,},
			{title: 'Step 3',description,},
		],
		
		current11: 0,
		stepStyle: {marginBottom: '60px',boxShadow: '0px -1px 0 0 #e8e8e8 inset',},
		items11:[
			{title: 'Step 1',subTitle: '00:00:05',status: 'finish',description: 'This is a description.',},
			{title: 'Step 2',subTitle: '00:01:02',status: 'process',description: 'This is a description.',},
			{title: 'Step 3',subTitle: 'waiting for longlong time',status: 'wait',description: 'This is a description.',},
		],
		items12:[
			{status: 'finish',title: 'Step 1',},
			{status: 'process',title: 'Step 2',},
			{status: 'wait',title: 'Step 3',},
			{status: 'wait',title: 'Step 4',},
		],
		items13:[
			{status: 'finish',title: 'finish 1',},
			{status: 'finish',title: 'finish 2',},
			{status: 'process',title: 'current process',},
			{status: 'wait',title: 'wait',disabled: true,},
		],
		
		current14: 1,
		items14: [
			{title: 'Finished',description,},
			{title: 'In Progress',subTitle: 'Left 00:00:08',description,},
			{title: 'Waiting',description,},
		],
		items15: [
			{title: 'Finished',description,},
			{title: 'In Progress',subTitle: 'Left 00:00:08',description,},
			{title: 'Waiting',description,},
		],
		
		items16: [
			{title: 'Step 1',description: 'This is a Step 1.',},
			{title: 'Step 2',description: 'This is a Step 2.',},
			{title: 'Step 3',description: 'This is a Step 3.',},
		],
		data16: [
			{title: 'Ant Design Title 1',current: 0,},
			{title: 'Ant Design Title 2',current: 1,status: 'error',},
			{title: 'Ant Design Title 3',current: 2,},
			{title: 'Ant Design Title 4',current: 1,},
		],
		
		
	}
},
methods:{
	next(){
		this.current4++;
	},
	prev(){
		this.current4--;
	},
	onChange(current){
		console.log('onChange:', current);
	},
	
},
}

const app = Vue.createApp(Main);
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
